<template>
	<div class="main-container">
        <div :style="{'width': isCollapse === true ? '64px' : '200px'}" class="main-aside">
            <el-menu
                :collapse="isCollapse"
                background-color="#304156"
                text-color="#fff"
            >

                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">菜单1</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">菜单2</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">菜单3</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">菜单4</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="main-content">
            <div class="content-header">
                <div class="navbar">
                    <el-button
                        @click="isCollapse = !isCollapse"
                        :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                        type="text"
                        style="font-size: 30px;"
                    >
                    </el-button>
                </div>
                <div class="tags-view-container"></div>
            </div>
            <div class="content-view">
                <router-view></router-view>
            </div>
        </div>
	</div>
</template>

<script>
import axios from 'axios'
	export default {
		data () {
			return {
                isCollapse: false,
                msg: ''
			}
		},
        mounted () {
            // 注意点一：
            // 引用类型需要经过json转换才能存进去

            // 注意点二：
            // 刷新页面不会清空储存库
            // 只有在浏览器关闭的情况下才会清空所有储存

            sessionStorage.setItem('key1', 'value1')
            sessionStorage.setItem('key2', 100)

            sessionStorage.setItem('key3', JSON.stringify([1,2,3,4,5]))

            console.log(sessionStorage.getItem('key3'))
            console.log(typeof sessionStorage.getItem('key3'))
            console.log(JSON.parse(sessionStorage.getItem('key3')))

            // 删除session
            sessionStorage.removeItem('key1')

            // 注意点：
            // 储存的时间
            // session ----- 关闭浏览器会清空
            // local ----- 永久储存
            // 相对于浏览器的访问地址

            // localStorage
            localStorage.setItem('key1', 'value1')
            localStorage.setItem('key2', JSON.stringify([1,2,3,4,5]))

            console.log(localStorage.getItem('key3'))
            console.log(typeof localStorage.getItem('key3'))
            console.log(JSON.parse(localStorage.getItem('key3')))

            localStorage.removeItem('key1')

            this.getData()



// login页面点击确定调用登录接口
// http://192.168.200.251:8888/admin/auth/login
// post
// username | password
// admin123 admin123
// 请求成功----弹出成功提示框---延迟500毫秒后----跳转路由到main
// 请求失败----弹出提示框，【登录错误】

// this.$notify({
//     title: '标题名称',
// });

        },
		methods: {
            // 浏览器储存

            getData () {
                // axios.get('http://127.0.0.1:3000/api/test/crud/list', {
                //     params: {
                //         pageIndex: 1,
                //         pageSize: 10,
                //         questionContent: '',
                //         status: ''
                //     }
                // }).then(res => {
                //     console.log(res)
                // })

                // axios({
                //     url: 'http://192.168.200.251:8888/admin/auth/login',
                //     method: 'post',
                //     data: {
                //         username: 'admin123',
                //         password: 'admin123'
                //     },
                //     // 请求头信息
                //     headers: {
                //         'Content-Type': 'application/json; charset=utf-8',
                //         // 'token': 'this is my token project'
                //     }
                // }).then(res => {
                //     console.log(res.data)
                // })
            }
		}
	}
</script>

<style scoped lang="scss">
.main-container {
    display: flex;
    height: 100%;

    .main-aside {
        width: 200px;
        background-color: rgb(48, 65, 86);
    }

    .main-content {
        flex: 1;

        .content-header {
            width: 100%;
            height: 84px;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 1px 2px #ddd;

            .navbar {
                height: 50px;
            }

            .tags-view-container {
                height: 34px;
            }
        }
    }

    .el-menu {
        border-right: solid 1px transparent;

        .el-submenu {
            .el-menu {

                .el-menu-item-group {
                    background: #1f2d3d;

                    ul {
                        li.el-menu-item {
                            
                            background-color: #1f2d3d !important;
                        }
                    }
                }
            }
        }
    }
}
</style>